<template>
  <el-row type="flex" justify="center">
    <el-col :span="12">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="登陆账号:" prop="loginName">
          <el-input v-model="form.loginName" placeholder="登录账号"></el-input>
        </el-form-item>
        <el-form-item label="用户姓名:" prop="userName">
          <el-input v-model="form.userName" placeholder="用户名称"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名:">
          <el-input v-model="form.realName" placeholder="真实姓名"></el-input>
        </el-form-item>
        <el-form-item label="联系方式:">
          <el-input v-model="form.phone" placeholder="联系方式"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱:">
          <el-input v-model="form.email" placeholder="电子邮箱"></el-input>
        </el-form-item>

        <el-form-item label="所属部门:">
          <vxe-table
                  ref="xTree1"
                  show-overflow
                  row-id="id"
                  row-key
                  :row-config="{isHover: true}"
                  :show-header="false"
                  :data="tableData"
                  height="200px"
                  :radio-config="{labelField: 'orgName',checkRowKey: checkRowKey}"
                  :tree-config="{transform: true, accordion: true, line: true, iconOpen: 'fa fa-caret-down', iconClose: 'fa fa-caret-right'}">
            <vxe-column type="radio" tree-node></vxe-column>
          </vxe-table>
        </el-form-item>

        <el-form-item label="授权角色:">
          <vxe-table
                  ref="xTree2"
                  show-overflow
                  row-key
                  row-id="id"
                  :row-config="{sHover: true}"
                  :checkbox-config="{checkRowKeys: form.roles, highlight: true}"
                  :show-header="false"
                  :data="tableData2"
                  height="200px">
            <vxe-column type="checkbox" width="60"></vxe-column>
            <vxe-column field="roleName" title="角色名称"></vxe-column>
          </vxe-table>
        </el-form-item>

        <el-form-item style="text-align: center">
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button type="danger" @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
  import {userPublic, queryUserById, editUser} from "@/api/operations-center/user";

  export default {
    name: "UserEdit",
    mixins: [userPublic],
    data() {
      return {
        checkRowKey: '-1',
        form: {
          uid: '',
        },
      }
    },
    methods: {
      /**
       * {方法功能中文描述}
       *
       * @author: 宋康
       * @date: 2022/8/23 09:22
       */
      queryUser() {
        queryUserById(this.form.uid).then(res => {
          if (res.status && res.data) {
            this.form = {
              ...res.data
            }
            if (res.data.organizations && res.data.organizations.length > 0) {
              this.form.organizations = [];
              this.form.organizations.push(res.data.organizations[0].id);
              this.checkRowKey = res.data.organizations[0].id
            } else {
              this.checkRowKey = '-1'
            }
            this.queryOrgList();
            this.queryRoleList();
          }
        })
      },
      /**
       * {编辑}
       *
       * @author: 宋康
       * @date: 2022/8/23 10:14
       */
      onSubmit() {
        let organizations = this.getRadioRecord('xTree1');
        let orgList = '0' === organizations ? [] : [organizations];
        //
        let roles = this.getCheckboxRecords('xTree2');
        //
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.form.id = this.form.uid;
            this.form.roles = roles;
            this.form.organizations = orgList;
            editUser(this.form).then(res => {
              if (res.status) {
                this.$XModal.alert({
                  content: '编辑成功',
                  status: 'success',
                }).then(() => {
                  this.cancel();
                })
              } else {
                this.$XModal.alert({
                  content: res['msg'],
                  status: 'error',
                })
              }
            })
          } else {
            return false;
          }
        })
      }
    },
    mounted() {
      this.form.uid = this.$route.query.id || '0';
      this.queryUser();
    }
  }
</script>

<style lang="scss" scoped>
</style>
